<template>
	<view class="content">
		<view class="brand-lsit">
			<view class="brand-header-text">
				<view class="line"></view> 热改楼盘
			</view>
			<view class="brand-image-list">
				<view class="view-imaga-list">
					<image class="image-list" src="../../static/images/index/sofa.png"></image>
				</view>
				<view class="view-imaga-list">
					<image class="image-list" src="../../static/images/index/sofa.png"></image>
				</view>
				<view class="view-imaga-list">
					<image class="image-list" src="../../static/images/index/sofa.png"></image>
				</view>
				<view class="view-imaga-list">
					<image class="image-list" src="../../static/images/index/sofa.png"></image>
				</view>
			</view>
		</view>
		<view class="setmeal-header-text">
			<view class="line"></view> 楼盘套餐
		</view>
		<view class="setmeal-list">
			<view class="setmeal-row-image">
				<view class="setmeal-image-list">
					<image class="setmeal-image" src="../../static/images/index/setmeal1.png">
						<view class="setmeal-image-details"></view>
					</image>
					
				</view>
				<view class="setmeal-image-list">
					<image class="setmeal-image" src="../../static/images/index/setmeal2.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.content {
		width: 100vw;
		height: 100vh;
		background-color: #F5F5F5;
		box-sizing: border-box; //盒子模型
	}
	::-webkit-scrollbar {
		width: 0;
	}
	.brand-lsit {
		width: 750rpx;
		height: 284rpx;
		background: #ffffff;
		box-sizing: border-box;
		padding-left: 30rpx;
		padding-top: 34rpx;
		padding-bottom: 28px;
	}
	.brand-header-text {
		font-size: 28rpx;
		font-weight: 700;
		color: #333333;
		line-height: 28rpx;
	
		display: flex;
		align-items: center;
	}
	.line {
		width: 6rpx;
		height: 28rpx;
		background: #3d9c36;
		margin-right: 20rpx;
	}
	.brand-image-list{
		box-sizing: border-box;
		overflow-x: scroll;
		margin-top: 20rpx;
		display: flex;
	}
	.view-imaga-list{
		margin-right: 20rpx;
	}
	.image-list{
		
		width: 280rpx;
		height: 168rpx;
	}
	
	.setmeal-header-text{
		margin-top: 20rpx;
		margin-left: 40rpx;
		font-size: 28rpx;
		font-weight: 700;
		color: #333333;
		line-height: 28rpx;
			
		display: flex;
		align-items: center;
	}
	.setmeal-list{
		margin-top: 20rpx;
	}
	.setmeal-row-image{
		box-sizing: border-box;
		overflow-x: scroll;
		display: flex;
	}
	.setmeal-image-list{
		margin-left: 40rpx;
		width: 382rpx;
		height: 510rpx;
		margin-right: 20rpx;
		position: relative;
	}
	.setmeal-image{
		width: 316rpx;
		height: 420rpx;
		background: rgba(0,0,0,0.50);
		border-radius: 12rpx 12rpx 0rpx 0rpx;
		position: absolute;

	}
	.setmeal-image-details{
		width: 316rpx;
		height: 164rpx;
		background: #ffffff;
		border-radius: 0rpx 0rpx 12rpx 12rpx;
		position: relative;
		top: 420rpx;
	}
</style>
